<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/style.css" />
		<link rel="stylesheet" href="../../css/title.css" />
		<link rel="stylesheet" href="../css/iconfontx.css">
		
		<style>
			.mui-content{margin:0px 0px;}
			.mui-card .mui-table-view .mui-table-view-cell{background-color:#333;}
			.mui-table-view-cell:after{height:0;}
			.mui-table-view-cell{margin-bottom:10px;}
			.mui-card .mui-table-view{background-color:#1a1a1a;}
			.mui-card .mui-table-view a{color:#f0f0f0;}
			.mui-card .mui-table-view a.mui-active{background:#444;}
			.home_top{
				height: 70px;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
			}
			.mui-bar-nav~.mui-content{
				padding-top: 70px;
			}
			.home_top .mui-title{
				position: absolute;
				top: 10px;
			}
			.home_top .mui-title span{
				width: auto;
				height: 35px;
				background: black;
				color: rgb(250,175,58);
				line-height: 35px;
			}
			.home_top a.mui-action-back{
				color: black;
			}
			.comment-name{
				width: 100%;
				height: auto;
				padding: 5px 10px;
			}
			.commodity-name h2{
				color: white;
				font-weight: normal;
				font-size: 22px;
				margin-bottom: 10px;
			}
			.commodity-name span{
				color: rgb(240,90,35);
				font-size: 30px;
			}
			.cmdn-shop{
				display: block;
				height: 40px;
				width: 94%;
				margin-left: 3%;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
				text-align: center;
				line-height: 40px;
				color: black;
				font-size: 18px;
				font-family: "微软雅黑";
				margin-top: 10px;
			}
			.cmdn-detail{
				width: 100%;
				font-size: 22px;
				color: white;
				text-align: center;
				margin-top: 10px;
				font-family: "微软雅黑";
				position: relative;
			}
			.detail-triangle{
				width:0px;
				height:0px;
				border-top:8px solid rgb(250,175,58);
				border-left:8px solid transparent;
				border-bottom:4px solid transparent;
				border-right:8px solid transparent;
				position: absolute;
				bottom: -18px;
				left: 50%;
				margin-left: -5px;
			}
			.detail-triangleup{
				width:0px;
				height:0px;
				border-top:4px solid transparent;
				border-left:8px solid transparent;
				border-bottom:8px solid rgb(250,175,58);
				border-right:8px solid transparent;
				position: absolute;
				bottom: -13px;
				left: 50%;
				margin-left: -5px;
			}
			.commodity-main{
				width: 100%;
				padding:5px 10px;
				margin-top: 30px;
				padding-bottom: 70px;
			}
			.commodity-bottom{
				position: fixed;
				width: 100%;
				height: 60px;
				left: 0px;
				bottom: 0px;
				background: rgb(26,26,26);
				z-index: 999;
				border-top: 1px solid rgb(32,32,32);
			}
			.cmdb_left{
				display: block;
				width: 25%;
				height: 60px;
				float: left;
				text-align: center;
				padding-top: 10px;
			}
			.cmdb_left span{
				font-size: 30px;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
		        -webkit-background-clip: text;
		        color: transparent;
			}
			.cmdb_left p{
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
		        -webkit-background-clip: text;
		        color: transparent;
		        line-height: 12px;
			}
			.cmdb_right{
				width: 50%;
				height: 60px;
				float: left;
			}
			.cmdb_right a{
				display: block;
				width: 95%;
				height: 40px;
				margin-top: 10px;
				padding-top: 5px;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
				text-align: center;
				border-radius: 10px;
			}
			.cmdb_right p{
				color: black;
				font-size: 20px;
				font-family: "微软雅黑";
				line-height: 16px;
			}
			.cmdb_right span{
				font-size: 10px;
			}
			.commodity-kefu{
				width: 200px;
				height: 80px;
				background: rgba(0,0,0,0.8);
				position: fixed;
				left: 50%;
				margin-left: -100px;
				top: 50%;
				margin-top: -40px;
				z-index: 999;
			}
			.commodity-kefu p{
				line-height: 45px;
				margin: 0;
				padding: 0;
				text-align: center;
				color: white;
				font-size: 18px;
			}
			.cancel{
				display: block;
				width: 99px;
				border-right:1px solid rgb(32,32,32);
				height: 35px;
				float: left;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
				text-align: center;
				line-height: 35px;
				color: black;
			}
			.cell{
				display: block;
				width: 100px;
				height: 35px;
				float: left;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
				text-align: center;
				line-height: 35px;
				color: black;
			}
		</style>
	</head>

	<body>
		
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav home_top">
			<h1 class="mui-title"><span lang>商品详情</span></h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header> 
		
		<div class="commodity-bottom">
			<a class="cmdb_left" id="go_shop" data-id="" data-name="">
				<span class="iconfont icon-msnui-dianpu"></span>
				<p lang>店铺</p>
			</a>
			<a class="cmdb_left" id="do_tel">
				<span class="iconfont icon-kefu"></span>
				<p lang>客服</p>
			</a>
			<div class="cmdb_right">
				<a id="do_buy" data-id="">
					<p><font lang>立即购买<font><br/><span>BUY NOW</span></p>
				</a>
			</div>
		</div>
		
		<div class="commodity-kefu" id="show_tel" style="display:none;">
			<p id="service_tel"><!--135 0000 8888--></p>
			<div>
				<a class="cancel" lang>取 消</a>
				<a class="cell" lang>呼 叫</a>
			</div>
		</div>
		
		<div class="mui-slider" style="padding-top: 70px;height:340px;">
			<!--
			<div class="mui-slider-group mui-slider-loop">

				<div class="mui-slider-item mui-slider-item-duplicate">
					<a>
						<img src="http://kapaytest.phpk.cn/Uploads/goods/goods_images/33/1.jpg">
					</a>
				</div>
			
				<div class="mui-slider-item">
					<a>
						<img src="http://kapaytest.phpk.cn/Uploads/goods/goods_images/33/2.jpg">
					</a>
				</div>
				
				<div class="mui-slider-item">
					<a>
						<img src="http://kapaytest.phpk.cn/Uploads/goods/goods_images/33/3.jpg">
					</a>
				</div>
				
				<div class="mui-slider-item">
					<a>
						<img src="http://kapaytest.phpk.cn/Uploads/goods/goods_images/33/4.jpg">
					</a>
				</div>
				
	
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a>
						<img src="http://kapaytest.phpk.cn/Uploads/goods/goods_images/33/1.jpg">
					</a>
				</div>
			</div>
			
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div> -->
			
		</div>
		<div class="commodity-name">
			<h2 id="goods_name"><!--苹果 iphone7 4G全网通手机--></h2>
			<span id="shop_price"><!--4276--></span>
			<span style="color:#ccc;font-size:14px;float: right;padding-right:20px;">运费：<font id="shipping_price"></font> 元</span>
			<span style="color:#ccc;font-size:14px;float: right;padding-right:20px;">库存：<font id="store_count"></font></span>
			<a class="cmdn-shop" id="store_name" data-id="" data-name=""><!--店铺名称--></a>
			<div class="cmdn-detail" id="show_good_detail">
				<font lang>商品详情</font>
				<div class="detail-triangle" id="slider_down" style="display:none;"></div>
				<div class="detail-triangleup" id="slider_up"></div>
			</div>
		</div>
		
		<div class="commodity-main" id="goods_detail">
			<!--<img src="../../img/shop.png" width="100%">
			<p>666666666666666666</p>
			<p>666666666666666666</p>
			<p>666666666666666666</p>
			<p>666666666666666666</p>
			<p>666666666666666666</p>
			<p>666666666666666666</p>
			<p>666666666666666666</p>-->
		</div>
		
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/sockjs.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script src="../../resource/store/commodity_detail.js"></script>
		<script src="../../lang/shop.js"></script>
		
	</body>

</html>